import React, { useState } from 'react';
import { Button, Divider, Image, message, Modal } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { ModalForm, ProFormText } from '@ant-design/pro-form';
import type { ImagesListItem, ImagesListParams } from '../data';
import styles from './index.less';
import { updateImages, deleteImages } from '../service';

export type ImageItemProps = {
  getImages: (params?: ImagesListParams) => void;
  searchTitle: string;
  paginationData: {
    defaultCurrent: number;
    pageSize: number;
  };
} & Omit<ImagesListItem, 'icon' | 'children'>;

/**
 * 重命名图片
 */
const handleRename = async (params: ImagesListParams) => {
  const hide = message.loading('正在添加');
  try {
    await updateImages({ ...params });
    hide();
    message.success('修改成功');
    return true;
  } catch (err) {
    hide();
    message.error('修改失败请重试');
    return false;
  }
};

/**
 * 移动图片
 */
// const handleMove = () => {

// }

const ImageItem: React.FC<ImageItemProps> = (props) => {
  const {
    id,
    src,
    title,
    getImages,
    searchTitle,
    paginationData: { defaultCurrent, pageSize },
  } = props;
  const [renameModalVisible, setRenameModalVisible] = useState(false);
  // const [moveModalVisible, setMoveModalVisible] = useState(false)
  return (
    <div className={styles['image-item']}>
      <div className={styles['image-item-image']}>
        <Image src={src} />
      </div>
      <div className={styles['image-item-title']} title={title}>
        {title}
      </div>
      <div className={styles['image-item-btn']}>
        <Button
          type="link"
          size="small"
          onClick={() => {
            setRenameModalVisible(true);
          }}
        >
          重命名
        </Button>
        <Divider type="vertical" />
        <Button
          type="link"
          size="small"
          onClick={(val) => {
            console.log('move', val);
            getImages();
          }}
        >
          移动
        </Button>
        <Divider type="vertical" />
        <Button
          type="link"
          size="small"
          onClick={async () => {
            Modal.confirm({
              title: '提醒',
              icon: <ExclamationCircleOutlined />,
              content: '确认删除该图片吗？',
              okText: '确认',
              cancelText: '取消',
              onOk: async () => {
                const hide = message.loading('正在删除');
                try {
                  await deleteImages({ id });
                  hide();
                  message.success('删除成功');
                  getImages();
                  return true;
                } catch (err) {
                  hide();
                  message.error('删除失败请重试');
                  return false;
                }
              },
            });
          }}
        >
          删除
        </Button>
      </div>

      <ModalForm
        title={`【${title}】 图片重命名`}
        width="300px"
        visible={renameModalVisible}
        onVisibleChange={setRenameModalVisible}
        onFinish={async (params: ImagesListParams) => {
          // 确认提交操作
          const success = await handleRename({ id, ...params });
          if (success) {
            setRenameModalVisible(false);
            getImages({ title: searchTitle, currentPage: defaultCurrent, pageSize });
          }
        }}
      >
        <ProFormText
          rules={[
            {
              required: true,
              message: '名称不可以为空',
            },
          ]}
          width="sm"
          name="title"
        />
      </ModalForm>
    </div>
  );
};

export default ImageItem;
